<template>
  <div class="article clearifx">
    <div class="left_part">
      <div class="block">
        <el-carousel height="450px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="stati + item.path" alt="" class="bannerImg" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <el-card class="box-card" v-for="item in blogData" :key="item.id">
        <router-link :to="'/detail/' + item.id">
          <h2>{{ item.title }}</h2>
          <div class="clearfix">
            <div class="img_intr">
              <img :src="stati + item.img" alt="" />
            </div>
            <p class="intro">{{ item.introduction }}</p>
          </div>
          <div class="flooter_content">
            <ul>
              <li>
                <span class="iconfont icon-yueduliang"></span>
                <p>{{ item.read_ }}</p>
              </li>
              <li>
                <span class="iconfont icon-fenlei"></span>
                <p>{{ BLOG_TYPE[item.blog_type] }}</p>
              </li>
              <li>
                <span class="iconfont icon-biaoqian"> </span>
                <p>{{ Tag[item.blog_tag] }}</p>
              </li>
              <li>
                <span class="iconfont icon-zuozhe"></span>
                <p>{{ item.author }}</p>
              </li>
              <li>
                <span class="iconfont icon-fabushijian"></span>
                <p>{{ getTime(item.create_time) }}</p>
              </li>
            </ul>
          </div>
        </router-link>
      </el-card>

      <p v-if="loading">加载中...</p>
      <p v-else>没有更多了</p>
    </div>
    <div class="right_part">
      <div class="right_item">
        前端
        <div class="mask"></div>
      </div>
      <div class="website_intr">
        <figure class="logo">
          <img src="../../assets/img/avatar.jpg" alt="logo" />
        </figure>
        <h1>尘光</h1>
        <ul>
          <li>
            <p>文章</p>
            <p>{{ total }}</p>
          </li>
          <router-link to="/about">
            <li>
              <p>分类</p>
              <p>{{ blogType }}</p>
            </li></router-link
          >
          <li>
            <p>标签</p>
            <p>{{ tagTotal }}</p>
          </li>
        </ul>
        <button class="adCoeect" :plain="true" @click="open">
          添加到个人标签
        </button>
      </div>
      <!-- 标签云 -->
      <div><tagData :tagdata="handleTagdata"></tagData></div>
      <followUs></followUs>
      <weather></weather>
    </div>
  </div>
</template>

<script>
import weather from "../../components/weather.vue";
import followUs from "../../components/followUs.vue";
import { formatDate } from "../../util/tool";
import { getbanner, getBlogs, gettypetag } from "../../api/serve";
import { stati } from "../../api/api";
import tagData from "../../components/tagClud.vue";
export default {
  name: "home",
  components: {
    tagData: tagData,
    followUs,
    weather,
  },
  data() {
    return {
      bannerList: [],
      blogData: [],
      stati,
      page: 1,
      count: 10,
      total: 0,
      TagData: "",
      handleTagdata: "",
      loading: false,
      noMore: false,
      tagTotal: "",
      blogType: 2,
      BLOG_TYPE: {
        "D1DC83DE-82DD-4375-950B-9FB067BD7424": "前端",
        "3A0BD8AB62084D9FA21B3FC8618233FD": "后端",
      },
      Tag: {},
    };
  },
  mounted() {
    this.init();
    this.initTag();
    window.addEventListener("scroll", this.handleScroll); // 监听页面滚动
  },
  watch: {
    page: function (value) {
      console.log(value);
      let pageBlog = Math.ceil(this.total / 10);
      if (value > pageBlog) {
        this.loading = false;
        return;
      }
      getBlogs({ page: this.page }, (res) => {
        this.blogData = [...this.blogData, ...res.data.data];
      });
    },
  },
  methods: {
    getTime(datastr) {
      // console.log(datastr);
      return formatDate(datastr);
    },
    // 处理标签云数据
    initTag(data) {
      let datas = [];
      let arr = [];
      if (data) {
        data.forEach(function (item) {
          arr = [];
          for (let i = 0; i < 3; i++) {
            let random = Math.ceil(Math.random() * 200);
            arr.push(random);
          }
          datas.push({
            rgb1: arr[0],
            rgb2: arr[1],
            rgb3: arr[2],
            tagid: item.tagid,
            tagname: item.tagname,
          });
        });
      }

      this.handleTagdata = datas;
    },

    open() {
      this.$message("请按住cltrl+D，进行添加");
    },
    // 获取页面滚动距离
    handleScroll(event) {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      console.log(scrollTop, windowHeight, scrollHeight);
      if (scrollTop + windowHeight > scrollHeight - 5) {
        // console.log();
        //写后台加载数据的函数
        let pageBlog = Math.ceil(this.total / 10);

        if (this.page <= pageBlog) {
          this.page += 1;
          this.loading = true;
        }
      }
    },

    init() {
      // getw((res) => {
      //   console.log(res);
      // });
      // 获取banner图
      getbanner((res) => {
        this.bannerList = res.data;
      });
      //获取博客数据
      getBlogs({ page: this.page }, (res) => {
        this.blogData = res.data.data;
        this.total = res.total;
      });
      // 获取标签
      gettypetag((res) => {
        let data = res.data;
        this.initTag(data);
        this.tagTotal = data.length;
        this.TagData = data;
        let dataTag = {};
        data.forEach(function (item) {
          dataTag[item.tagid] = item.tagname;
        });
        this.Tag = dataTag;
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.flooter_content {
  ul {
    display: flex;
    li {
      display: flex;
      align-items: center;
      margin-left: 25px;
      margin-top: 20px;
      p {
        margin-left: 5px;
      }
    }
    // & > li:nth-child(1) {
    //   margin-left: 0;
    // }
  }
}
.adCoeect {
  width: 80%;
  height: 40px;
  background-color: rgb(71, 164, 226);
  margin-left: 32px;
  color: #bbc0c7;
  border: none;
  margin-top: 15px;
  margin-bottom: 5px;
  transition: all 0.3s linear;
  box-shadow: 0 2px 12px 0 rgb(71, 164, 226);
}
.adCoeect:hover {
  background-color: rgb(199, 128, 28);
  box-shadow: 0 2px 12px 0 rgb(199, 128, 28);
  cursor: pointer;
}
.website_intr {
  margin-top: 20px;
  padding: 30px 30px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin-bottom: 20px;
  cursor: pointer;
  h1 {
    text-align: center;
    color: #ccc;
    margin-top: 20px;
  }
  ul {
    display: flex;
    margin-left: -17px;
    margin-top: 20px;
    li {
      text-align: center;
      margin-left: 63px;
      p {
        margin-bottom: 15px;
      }
    }
  }
  .logo {
    text-align: center;
    img {
      width: 100px;
      border-radius: 50%;
    }
  }
}
.logo img:hover {
  animation: ant 0.5s 0.1s linear;
}
@keyframes ant {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.text {
  font-size: 14px;
}
.block {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.item {
  padding: 18px 0;
}
.box-card:hover .img_intr img {
  transform: scale(1.1, 1.1);
}
.box-card:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -5px, 0);
}
.box-card {
  width: 100%;
  box-shadow: 0 -11px -26px 0 rgb(0 0 0 / 10%);
  margin-bottom: 20px;
  cursor: pointer;
  h2 {
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .img_intr {
    float: left;
    margin-right: 10px;
    overflow: hidden;
    img {
      width: 368px;
      height: 200px;
      transform: scale(1, 1);
      transition: all 0.3s ease-in-out;
    }
  }
  .intro {
    line-height: 24px;
  }
}
.article {
  width: 1200px;
  // height: 900px;
  margin: 0 auto;
  // background-color: pink;
  display: flex;
}
.left_part {
  width: 800px;
  float: left;
  margin-right: 40px;
  .bannerImg {
    width: 100%;
    height: 100%;
  }
}
.right_part {
  width: 380px;
  float: right;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.right_item {
  position: relative;
  width: 100%;
  height: 450px;
  line-height: 450px;
  text-align: center;
  background-image: url("../../assets/img/front.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  // margin-left: 20px;
  color: #fff;
  font-weight: bold;
  font-size: 64px;
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.3;
    transition: all 0.3s linear;
  }
  & .mask:hover {
    opacity: 0;
    cursor: pointer;
  }
}
</style>
